<template>
	<view>
		<view class="dingguding">
			<view class="tjzhouq">统计周期</view>
			<view class="ddshur">
				<picker mode="date" :value="htkssj"  :start="startDate" :end="endDate" @change="getksriqi">
					<view>{{htkssj}}</view>
				</picker>
			</view>
			<view class="ddshur">
				<picker mode="date" :value="htjssj" :start="startDate" :end="endDate" @change="getjiesriqi">
					<view>{{htjssj}}</view>
				</picker>
			</view>
			<scroll-view class="xingxtq"  scroll-x="true">
				<view class="gundong" :style="{'width':kuan}">
					<view class="jvzhong" v-for="(item,xid) in faxins" @click="xzfxshi(xid)">
						<view :class="dqxz==xid?'shejisk yixz':'shejisk yixz bantm'">
							<image class="fximg" :src="item.udix" mode="aspectFill"></image>
							<view>{{item.xinm}}</view>
						</view>
						<view :class="dqxz==xid?'jtcx':'jtyc'"></view>
					</view>
				</view>
			</scroll-view>
			<view class="jindulan">
				<view class="liangb">
					<view>业绩进度</view>
					<view>70%</view>
				</view>
				<view class="waiku">
					<view class="jindu"/>
				</view>
			</view>
		</view>
		<view class="xiabygl">
			<view class="xinxisek">
				<view>要求业绩</view>
				<view class="xxxq">5000</view>
			</view>
			<view class="xinxisek">
				<view>已完成</view>
				<view class="xxxq">3800</view>
			</view>
			<view class="xinxisek">
				<view>服务人数</view>
				<view class="xxxq">435</view>
			</view>
			<view class="xinxisek">
				<view>提成</view>
				<view class="xxxq">763</view>
			</view>
			<view class="xinxisek">
				<view>推广人数</view>
				<view class="xxxq">1231</view>
			</view>
			<view class="xinxisek">
				<view>分成</view>
				<view class="xxxq">314</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				htkssj: '请选择开始日期',  //合同开始时间
				htjssj: '请选择结束日期',  //合同结束时间
				dqxz:0,
				kuan:'1100rpx',
				faxins:[{
					udix:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Ffront%2F413%2Fw640h573%2F20190214%2FO7QJ-hswimzz2200599.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643351134&t=06d9acc4b8a3c4ff8812deec9141e197',
					xinm:'西大店',
				},{
					udix:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0421%2F71341789j00q9570u000xd000hs00hsp.jpg&refer=http%3A%2F%2Fdingyue.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643359415&t=08c27f2a263da4c268a2084f7b71628c',
					xinm:'金湖店',
				},{
					udix:'https://img1.baidu.com/it/u=2848178812,2645504148&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',
					xinm:'江南万达店',
				},{
					udix:'https://img1.baidu.com/it/u=2910686003,4264925804&fm=26&fmt=auto',
					xinm:'民大店',
				},{
					udix:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13771542451%2F1000&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643359851&t=6a9de461ce8494b9397ed30e364669b0',
					xinm:'安吉店',
				}],
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			// 选择开始日期
			getksriqi: function(e) {
				this.htkssj = e.target.value
			},
			// 选择结束日期
			getjiesriqi: function(e) {
				this.htjssj = e.target.value
			},
			xzfxshi(xid){
				this.dqxz = xid
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				console.log(year)
				if (type === 'start') {
					year = year - 2;
				} else if (type === 'end') {
					year = year + 60;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.dingguding{
		width: 650rpx;
		padding:0 50rpx;
		// background: #f8f8f8;
		// position: fixed;
		// top: 44px;
		// z-index: 99;
		.tjzhouq{
			font-weight: bold;
		}
		.ddshur{
			width: 550rpx;
			margin: 20rpx 0;
			padding: 10rpx 50rpx;
			background: #dcdcdc;
			border-radius: 20rpx;
		}
		.xingxtq{
			width: 670rpx;
			margin-top: 30rpx;
			.gundong{
				display: flex;
				padding-right: 20rpx;
				// width: 200rpx;
				.jvzhong{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-bottom: 20rpx;
					.jtcx{
					    width: 0rpx;
					    height: 0rpx;
					    border-top: 25rpx solid #ff007f;
					    border-right: 25rpx solid transparent;
					    border-left: 25rpx solid transparent;
						margin-left: 20rpx;
					}
					.jtyc{
					    width: 0rpx;
					    height: 0rpx;
					    border-top: 25rpx solid #ffffff;
					    border-right: 25rpx solid transparent;
					    border-left: 25rpx solid transparent;
						margin-left: 20rpx;
					}
					.shejisk{
						width: 160rpx;
						padding-bottom: 20rpx;
						border-radius: 20rpx;
						margin-left: 20rpx;
						text-align: center;
						font-size: 30rpx;
						.fximg{
							width: 160rpx;
							height: 160rpx;
							border-radius: 20rpx 20rpx 0 0;
							// border-radius: 60rpx;
						}
						.fxname{
							font-size: 28rpx;
							color: #808080;
							margin-top: 5rpx;
						}
					}
					.yixz{
						background-color: #ff007f;
						color: #ffffff;
					}
					.bantm{
						opacity: 0.3;
					}
					.wxz{
						background-color: #efefef;
					}
				}
				
			}
			
			
		}
		.dianpuxx{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.gerxinx{
				display: flex;
				align-items: center;
				.mendtup{
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
				}
				.mendxx{
					margin-left: 10rpx;
					.dianpum{
						font-size: 30rpx;
						font-weight: bold;
					}
					.dizhi{
						display: flex;
						align-items: center;
						font-size: 25rpx;
						color: #2979FF;
						.zhib{
							padding: 5rpx 20rpx;
							font-size: 25rpx;
							background: #ff007f;
							border-radius: 20rpx;
							color: #ffffff;
							margin-left: 10rpx;
							
						}
						.xiuxi{
							padding: 5rpx 20rpx;
							font-size: 25rpx;
							background: #d0d0d0;
							border-radius: 20rpx;
							color: #838383;
							margin-left: 10rpx;
							
						}
					}
				}
			}
			.caozuo{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 150rpx;
				margin-right: 20rpx;
				.cctybia{
					width: 60rpx;
					height: 60rpx;
				}
			}
			
			
		}
		.jindulan{
			font-size: 28rpx;
			color: #676767;
			margin-top: 30rpx;
			.liangb{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.waiku{
				margin-top: 15rpx;
				width: 650rpx;
				height: 25rpx;
				background: #d8d8d8;
				border-radius: 13rpx;
				.jindu{
					width: 70%;
					height: 25rpx;
					background: #ff007f;
					border-radius: 13rpx;
				}
			}
		}
	}
	.xiabygl{
		width: 690rpx;
		padding: 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		// margin-top: 250rpx;
		.xinxisek{
			width: 230rpx;
			height: 100rpx;
			background: #eaeaea;
			border-radius: 20rpx;
			padding: 50rpx;
			font-size: 25rpx;
			color: #4d4d4d;
			margin-bottom: 30rpx;
			.xxxq{
				font-weight: bold;
				font-size: 50rpx;
				margin-top: 10rpx;
				color: #ff007f;
			}
		}
		
	}
</style>
